<!-- 缴费信息 -->
<template>
  <view class="px-15 py-10 fz-14 bgf mt-15">
    <view class="disFlxJS linh-35">
      <view class="title">申请职务</view>
      <view>{{ info.levelName }}</view>
    </view>
    <view class="disFlxJS linh-35">
      <view class="title">实际职务</view>
      <view>{{ info.nowLevelName }}</view>
    </view>
    <view class="disFlxJS linh-35">
      <view class="title">会费标准</view>
      <view>{{ info.money }}元/{{ getUnit }}</view>
    </view>
    <view class="disFlxJS linh-35">
      <view class="title">
        {{ info.orderState === OrderStateEnum.NOPAYMENT ? '待缴金额' : '实缴金额' }}
      </view>
      <view>{{ info.payMoney }}元</view>
    </view>
    <view class="disFlxJS linh-35">
      <view class="title">本期缴费至</view>
      <view>{{ formatToDate(info.endTime) }}</view>
    </view>
    <view class="disFlxJS linh-35">
      <view class="title">{{ info.type === MemberOrderType.RENEW ? '续费函' : '缴费函' }}</view>
      <view class="btn" @click="download">查看</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { propTypes } from '@/utils/propTypes';
  import { useEnv } from '@/hooks/core/useEnv';
  import { useUpload } from '@/hooks/core/useUpload';
  import { Api as membershipApi } from '@/api/membership';
  import { OrderStateEnum } from '@/enums/orderEnum';
  import { MemberOrderType } from '@/enums/membershipEnum';
  import { formatToDate } from '@/utils/dateUtil';
  import { computed } from 'vue';

  const props = defineProps({
    info: propTypes.object.def({}),
    orderState: propTypes.number.def(0),
  });

  const getUnit = computed(() => {
    let unit = Math.floor(props.info.allottedTime / 12) + '年';
    if (props.info.allottedTime > 12 && props.info.allottedTime % 12 != 0) {
      unit += (props.info.allottedTime % 12) + '月';
    }
    return unit;
  });

  // 下载缴费函
  const { getEnv } = useEnv();
  const { openDocument } = useUpload();
  const download = () => {
    openDocument({
      filePath: getEnv('BASE_URL') + membershipApi.paymentExport + `/${props.info.id}`,
      fileType: 'pdf',
    });
  };
</script>
<style lang="scss" scoped>
  .title {
    color: #808080;
  }
  .btn {
    background-color: #e9e3b5;
    color: #000;
    width: 140rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    font-size: 28rpx;
    border-radius: 8rpx;
    box-sizing: border-box;
  }
</style>
